<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
 - GPX Loader template for Google Maps - Easily display GPS track and waypoint files
 -
 - Author: Bryce Nesbitt
 - URL: http://www.obviously.com/gis/gpx_loader.html
 - Licence: Freeware
 - See also: http://www.topografix.com/gpx_manual.asp
 -
 - There are five simple steps to get going:
 - 1) Give your .gpx file the same base name as this .html file.
 - 2) Visit http://www.google.com/apis/maps/ to get an API key from Google.
 - 3) Make sure you downloaded the pushpin image files (mm_20_red.png)./
 - 3) Test.
 - 4) Edit this template to set zoom level and/or colors.
 -
 - Note: some users have reported their web server sends .gpx files as
 - "plain text".  If this happens to you, and you can't fix the server, try
 - changing the extension to ".xml".
 -
 -->
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">

  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!-- #BeginEditable "doctitle" -->
  <title>GPX Loader for Google Maps - Easily display GPS track files</title>
<!-- #EndEditable -->
    <style type="text/css">
    v\:* {
      behavior:url(#default#VML);
    }
    </style>
	<!-- Set proper API key here -->
<script src="http://maps.google.com/maps?file=api&amp;v=1&amp;key=ABQIAAAAtmd9ryklYje8Y0mZyTz4cxQBDFby_rX5GYZdNBwYEMHM6eNDxRTevUGEWkaZHwBVL6UIBFVK9Wn0QA&hl=es" type="text/javascript"></script>
<!--script src="http://maps.google.com/maps?file=api&amp;v=1&amp;key=ABQIAAAAy5JytCXv5rMRZx3Ktla63hToD8jtT1W7oEwqWF2z1HbvQjhP7hQWWFYYP1TrVW7bdDRmXUaEGfWj5g" type="text/javascript"></script-->
  </head>

  <body>

<!-- #BeginEditable "editableContent" -->
<h1>GPX loader for Google Maps - cosme</h1>
<p>The following simple web page template can be used to display GPS (Global Positioning System) data inside a clickable and scrollable Google Map.  Simply upload points or tracks from a GPS, and give the resulting data the same name as the web page.  For example, the data for this page is called <a href="gpx_loader.gpx">gpx_loader.gpx</a>.  For free GPS download software that supports the GPX format, <a href="http://www.easygps.com/">EasyGPS</a> comes highly recommended.  To convert other GPS file formats, try <a href="http://www.gpsbabel.org/">GPSBabel</a>. To convert from shapefile or arcview see <a href="/gis/shp2text">shp2text</a>. For map pins see <a href="pins">pins</a>.</p>
</p>
<div id="map" style="width: 100%; height: 300px"></div>
<!-- #EndEditable -->

<script type="text/javascript">
//<![CDATA[

// Modify this to set the initial zoom level
var zoomlevel = 4;

// Modify this to set the icon types used
//
var red_pin = new GIcon();
red_pin.image  		 = "mm_20_red.png";
red_pin.shadow 	     = "mm_20_shadow.png";
red_pin.iconSize  	 = new GSize(12, 20);
red_pin.shadowSize 	 = new GSize(22, 20);
red_pin.iconAnchor 	 = new GPoint(6, 20);
red_pin.infoWindowAnchor = new GPoint(5, 1);

var green_pin = new GIcon();
green_pin.image  	 = "mm_20_green.png";
green_pin.shadow 	 = "mm_20_shadow.png";
green_pin.iconSize 	 = new GSize(12, 20);
green_pin.shadowSize = new GSize(22, 20);
green_pin.iconAnchor = new GPoint(6, 20);
green_pin.infoWindowAnchor = new GPoint(5, 1);

// Modify this to map attributes to colors or icon types
//
function chooseIcon(name, type) {
	if (type == "AIRPORT" ) {
		return(red_pin)
		}
	if (type == "Dot" ) {
		return(red_pin)
		}
	return(green_pin);
}

function chooseLineStyle(name, comment) {
	if (comment == "BB" ) {
		return(new Array("#00f0f0",5,.5))
		}
	return(new Array("#ff2000",6,.7))	// Color,Width,Opacity
}

// *****************************************************
// *****************************************************
// Internal function to create a marker with pop-up text
//
function createMarker(point, thtml, icon) {
  var marker = new GMarker(point, icon);
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(thtml);
  });
  map.addOverlay(marker);
  return marker;
}

// Create map object
//
var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());

// Add click handler to show latitude/longitude
//
var latlongmarker;
GEvent.addListener(map, 'click', function(overlay, point) {
  if (overlay) {
  } else if (point) {
	map.removeOverlay(latlongmarker);
    latlongmarker = new GMarker(point);
    map.addOverlay(latlongmarker);
	latlongmarker.openInfoWindowHtml(point.x + "<br>" + point.y);
  }
});

//	Load and parse GPX file
//	Builds .gpx filename based on html file
//
var request = GXmlHttp.create();
var URL = document.URL;
URL = URL.replace(/\.html$/,"");
URL = URL.concat(".gpx");
request.open("GET", URL, true);

request.onreadystatechange = function() {
  if (request.readyState == 4) {
		var gpxDoc = request.responseXML;
		if( !gpxDoc ) {
			alert("Could not load GPX document " + URL);
		} else if( !gpxDoc.documentElement ) {
			alert("Document " + URL + "\nwas not recognized by the XML loader");
		} else if( gpxDoc.documentElement.childNodes.length < 3 ) {
			alert("The XML loader could not parse document " + URL);
		} else {
			//
			//	Parse document <bounds>.  Open map.  Guess at zoom level.
			//
			minlat 		= 0;
			minlon 		= 0;
			maxlat 		= 0;
			maxlon 		= 0;
			bounds = gpxDoc.documentElement.getElementsByTagName("bounds");
			if( bounds && bounds.length )
				{
				minlat = parseFloat(bounds[0].getAttribute("minlat"));
				minlon = parseFloat(bounds[0].getAttribute("minlon"));
				maxlat = parseFloat(bounds[0].getAttribute("maxlat"));
				maxlon = parseFloat(bounds[0].getAttribute("maxlon"));
				}
			zoomlat		= minlat+(maxlat-minlat)/2;
			zoomlon		= minlon+(maxlon-minlon)/2;
			map.centerAndZoom(new GPoint(zoomlon,zoomlat),zoomlevel);
			bounds = [];

			//	Parse waypoints in <wpt></wpt> tags
			//
			var wpt;
			wpt = gpxDoc.documentElement.getElementsByTagName("wpt")
			if( wpt ) {
				for (var i = 0; i < wpt.length; i++) {

					point = new GPoint(parseFloat(wpt[i].getAttribute("lon")),
									   parseFloat(wpt[i].getAttribute("lat")));

					// Extract <name></name> tag
					tname  = "";
					tlabel = "";
					element = wpt[i].getElementsByTagName("name");
					if( element.length ) {
						tname   = element[0].firstChild.nodeValue;
						tlabel += element[0].firstChild.nodeValue;
						}

					// Tack on  <cmt></cmt> tag
					element = wpt[i].getElementsByTagName("cmt");
					if( element.length ) {
						if(tlabel) { tlabel += ": "; }
						tlabel += element[0].firstChild.nodeValue;
						}

					// Tack on <desc></desc> tag
					element = wpt[i].getElementsByTagName("desc");
					if( element.length ) {
						if(tlabel) { tlabel += " - "; }
						tlabel += element[0].firstChild.nodeValue;
						}

					// Extract <url></url> tag, build html for popup
					element = wpt[i].getElementsByTagName("url");
					if( element.length ) {
						turl = element[0].firstChild.nodeValue;
						var thtml 	= "<a href=\"" + turl + "target=\"_blank\">" + tlabel + "</a>";
						} else {
						var thtml	= tlabel;
						}

					// Determine map symbol based on <type></type> tag
					myicon = green_pin;
					type = wpt[i].getElementsByTagName("type");
					if( type.length ) {
						myicon = chooseIcon( tname, type[0].firstChild.nodeValue );
						}

					createMarker(point, thtml, myicon);
					}
				}
			wpt = [];
			

			//	Parse routes in <rte></rte>
			//
			var rte;
			rte = gpxDoc.documentElement.getElementsByTagName("rte");
			if (rte) {
				// Process each route
				//
				for (var i = 0; i < rte.length; i++) {
					tcolor="#4012FE";
					twidth=6;
					topacity=.7;

					// Extract <name></name> tag
					tname = "";
					element = rte[i].getElementsByTagName("name");
					if( element.length ) {
						if( element[0].firstChild ) {
							tname = element[0].firstChild.nodeValue;
							}
						}

					// Determine line color based on <cmt></cmt> and <name></name> tags
					type = rte[i].getElementsByTagName("cmt");
					if( type.length ) {
						if( type[0].firstChild ) {
							array    = chooseLineStyle( tname, type[0].firstChild.nodeValue );
							tcolor   = array[0];
							twidth   = array[1];
							topacity = array[2];
							}
						}

					// Process each point of each route, string 
					// them into a single polyline
					//
					points = [];
					var rtept = rte[i].getElementsByTagName("rtept");
					for (var k = 0; k < rtept.length; k++) {
						points.push(new GPoint(
							parseFloat(rtept[k].getAttribute("lon")),
							parseFloat(rtept[k].getAttribute("lat"))));
						}
					map.addOverlay(new GPolyline(points, tcolor, twidth, topacity));
					points = [];
					}
				rte = []
				}
			} // gpxDoc
		} // readyState
    } // function
request.send(null);

    //]]>
    </script>
<!-- #BeginEditable "editableContent" -->
<p>Map loaded by <a href="http://www.obviously.com/gis/gpx_loader.html">GPX Loader</a> Author: Bryce Nesbitt, Revision: October 2005, Licence: Freeware</p>
<!-- #EndEditable -->
  </body>
</html>
